<!--
 * @Author: CarlYang
 * @Date: 2021-07-23 15:31:51
 * @LastEditTime: 2021-07-26 09:12:43
 * @LastEditors: Please set LastEditors
 * @Description: 关系图谱
 * @FilePath: \vue-g6\src\views\GraphVis\company.vue
-->
<template>
  <el-container id="container">
    <div id="graph-panel" ref="graphpanel" style="width:100%;height:100%;"></div>
    <div class="left-toolbar">
      <ul>
        <li @click="setZoomOut" title="放大">
          <i class="iconfont icon-zoomin"></i>
        </li>
        <li @click="setZoomIn" title="缩小">
          <i class="iconfont icon-zoomout"></i>
        </li>
        <li @click="saveImage" title="保存图片">
          <i class="iconfont icon-baocun-"></i>
        </li>
        <li @click="saveJson" title="下载json">
          <i class="iconfont icon-json"></i>
        </li>
        <li @click="showOverView" title="缩略图">
          <i class="iconfont icon-suolvetu" style="font-size: 14px"></i>
        </li>
        <li @click="clockwiseRotate" title="顺时针旋转">
          <i class="iconfont icon-shunshizhenfangxiangclockwise4" style="font-size: 14px"></i>
        </li>
        <li @click="counterclockwiseRotate" title="逆时针旋转">
          <i class="iconfont icon-nishizhencounterclockwise3" style="font-size: 14px"></i>
        </li>
        <li @click="setMouseModel('normal')" title="正常模式">
          <i class="iconfont icon-pointer-up"></i>
        </li>
        <li @click="setMouseModel('drag')" title="拖拽模式">
          <i class="iconfont icon-line-dragmovetuozhuai-01"></i>
        </li>
        <li @click="setMouseModel('select')" title="框选模式">
          <i class="iconfont icon-kuangxuan1"></i>
        </li>
        <li @click="fullScreen" title="全屏显示">
          <i class="iconfont icon-quanping" style="font-size: 20px"></i>
        </li>
      </ul>
    </div>
  </el-container>
</template>
<script>
/* eslint-disable */
import VisGraph from '@/assets/js/GraphVis/old/visgraph.min.js'
import LayoutFactory from '@/assets/js/GraphVis/old/visgraph-layout.min.js'
import screenfull from 'screenfull'
import {
  xiaomi
} from '@/assets/js/xiaomi.js'
export default {
  name: 'DesignGraph',
  components: {
    VisGraph,
    LayoutFactory
  },
  data () {
    return {
      visgraph: null,
      centerNode: null,
      currentNode: [],
      config: {
        node: {
          label: {
            show: true,
            color: '250,250,250',
            font: 'normal 14px Microsoft YaHei',
            textPosition: 'Middle_Center',
            borderWidth: 0,
            wrapText: true
          },
          shape: 'circle',
          width: 60,
          height: 60,
          color: '62,160,250',
          borderColor: '62,160,250',
          borderWidth: 0,
          borderRadius: 0,
          lineDash: [0],
          alpha: 1,
          selected: {
            borderColor: '136,198,255',
            borderAlpha: 1,
            borderWidth: 3,
            showShadow: true,
            shadowColor: '136,198,255'
          },
          onClick: (event, node) => {
            // this.visgraph.highLightNeiberNodes(node, 1) // 高亮
          },
          ondblClick: (event, node) => {
            this.visgraph.restoreHightLight() // 取消高亮
            // const allNodes = this.visgraph.getVisibleData()
            // this.currentNode.push(node.id)
            // allNodes.nodes.forEach(item => {
            //   if (this.currentNode.indexOf(item.id) === (-1)) {
            //     this.visgraph.deleteNode(item)
            //   }
            // })
            // const findNodeNum = Math.round(Math.random() * 50)
            // const increamData = this.buildIncreamData(node, findNodeNum)
            // this.visgraph.activeAddNodeLinks(increamData.nodes, increamData.links)
            // this.visgraph.translateToCenter()
          },
          onMouseOver: (event, node) => {},
          onMouseOut: (event, node) => {}
        },
        link: {
          label: {
            show: true,
            color: '100,100,200',
            font: 'normal 10px Arial'
          },
          lineType: 'direct',
          colorType: 'defined',
          color: '200,200,200',
          alpha: 1,
          lineWidth: 1,
          lineDash: [0],
          showArrow: true,
          selected: {
            color: '20,250,50',
            alpha: 1,
            lineWidth: 4,
            showShadow: true,
            shadowColor: '50,250,50'
          }
        },
        highLightNeiber: true,
        wheelZoom: 0.8,
        noElementClick: (event, _graphvis) => {},
        layout: {
          type: 'force', //内置力导图布局算法
          options: {
            friction: 0.98,
            linkDistance: 200,
            linkStrength: 0.1,
            charge: -300,
            gravity: 0.01,
            noverlap: false
          }
        }
      }
    }
  },
  mounted () {
    this.handleData(xiaomi)
  },
  methods: {
    /**
     * 处理数据
     * @date 2021-07-23
     * @param {Object} data
     */
    handleData (data) {
      const obj = {
        nodes: [],
        links: []
      }
      const nodes = data.nodes
      nodes.forEach(item => {
        if (item.properties.name === '小米科技有限责任公司') {
          const nodeObj = {
            id: item.id,
            label: item.properties.name,
            properties: item.properties,
            color: '38,186,191',
            selectedBorderColor: '131,218,228',
            shadowColor: '131,218,228'
          }
          nodeObj.size = 80
          this.centerNode = nodeObj
          this.currentNode.push(item.id)
        } else {
          const nodeObj = {
            id: item.id,
            label: item.properties.name,
            properties: item.properties,
            size: 60
          }
          switch(item.type) {
            case 1:
              nodeObj.color = '242,105,97'
              nodeObj.selectedBorderColor = '249,179,157'
              nodeObj.shadowColor = '249,179,157'
              break
          }
          obj.nodes.push(nodeObj)
        }
      })
      const links = data.relationships
      links.forEach(item => {
        const linkObj = {
          id: item.id,
          target: item.startNode,
          source: item.endNode,
          label: item.properties.role,
          properties: item.properties
        }
        switch(item.type) {
          case 'INVEST':
            linkObj.color = '40,194,199'
            linkObj.selectedColor = '40,194,199'
            linkObj.shadowColor = '40,194,199'
            break
          case 'LEGAL':
            linkObj.color = '250,108,100'
            linkObj.selectedColor = '250,108,100'
            linkObj.shadowColor = '250,108,100'
            break
          case 'EMPLOY':
            linkObj.color = '0,132,255'
            linkObj.selectedColor = '0,132,255'
            linkObj.shadowColor = '0,132,255'
            break
          case 'LEGAL':
            linkObj.color = '250,108,100'
            linkObj.selectedColor = '250,108,100'
            linkObj.shadowColor = '250,108,100'
            break
        }
        obj.links.push(linkObj)
      })
      this.buildData(obj)
    },
    /**
     * 搭建实例
     * @date 2021-07-23
     * @param {Object} gxData
     */
    buildData (gxData) {
      this.visgraph = new VisGraph(document.getElementById('graph-panel'), this.config)
      gxData.nodes.push(this.centerNode)
      this.visgraph.drawData(gxData)
      this.visgraph.moveCenter()
      // this.resfreshCanvas(gxData)
    },
    resfreshCanvas (graphData) {
      var layout=new LayoutFactory(this.visgraph.getVisibleData()).createLayout("fastFR");
      layout.initAlgo();

      //执行300次布局算法，一次性将图的布局效果完成
      let i=0;
      while(i++ < 500){
        layout.runLayout(); //执行布局算法
      }
    },
    /**
     * 保存图片
     * @date 2021-07-23
     */
    saveImage () {
      this.visgraph.saveImage()
    },
    /**
     * 导出json
     * @date 2021-07-30
     */
    saveJson () {
      this.visgraph.exportJsonFile()
    },
    /**
     * 打开缩略图
     * @date 2021-07-23
     */
    showOverView () {
      console.log(this.showOverViewFlag)
      this.showOverViewFlag = !this.showOverViewFlag
      this.visgraph.showOverView(this.showOverView)
    },
    /**
     * 缩小操作
     * @date 2021-07-23
     */
    setZoomIn () {
      this.visgraph.setZoom('zoomIn')
    },
    /**
     * 放大操作
     * @date 2021-07-23
     */
    setZoomOut () {
      this.visgraph.setZoom('zoomOut')
    },
    /**
     * 顺时针旋转
     * @date 2021-07-23
     */
    clockwiseRotate () {
      this.visgraph.rotateGraph(-10)
    },
    /**
     * 逆时针旋转
     * @date 2021-07-23
     */
    counterclockwiseRotate () {
       this.visgraph.rotateGraph(10)
    },
    /**
     * 设置鼠标模式
     * @date 2021-07-23
     * @param {String} type  drag：拖动模式  select：框选模式   normal：正常模式
     */
    setMouseModel (type) {
      this.visgraph.setMouseModel(type)
    },
    /**
     * 全屏显示
     * @date 2021-07-23
     */
    fullScreen () {
      screenfull.request(this.$refs.graphpanel)
    }
  }
}
</script>

<style lang="scss" scoped>
#container {
  width: 100%;
  position: relative;
  .left-toolbar {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 45px;
    height: 100%;
    background-color: #fafafa;
    border-right: 1px solid #e5e2e2;
    ul {
      li {
        text-align: center;
        height: 35px;
        color: #066fba;
        line-height: 35px;
        cursor: pointer;
        padding: 0;
        i {
          font-size: 18px;
        }
        &:hover {
          background-color: #6ea36d;
          color: #fff;
        }
      }
    }
  }
}
</style>

